<template>
  <div>
    <el-input v-model="where.value" @input="getData" :placeholder="plugin.lang('inbound.btn.search')">
      <template #prepend>
        <el-select v-model="where.type" style="width:100px">
          <el-option :label="plugin.lang('form.number')" value="number"></el-option>
          <el-option :label="plugin.lang('form.name')" value="name"></el-option>
          <el-option :label="plugin.lang('form.sname')" value="sname"></el-option>
          <el-option :label="plugin.lang('form.code')" value="code"></el-option>
        </el-select>
      </template>
      <template #suffix>
        <i class="el-input__icon iconfont mini icon-loading-max round" v-if="loading"></i>
      </template>
    </el-input>
    <el-table :data="list" style="width: 100%; margin-top: 16px" :show-header="false">
      <el-table-column min-width="150" prop="name">
        <template #default="scope">
          <el-avatar shape="square" v-if="scope.row.image" :size="45" :src="app.img(scope.row.image)" class="goods-image" />
          <div class="goods-name">
            <div class="item wrap">
              {{ scope.row.name }} {{ scope.row.sname }}
            </div>
            <div class="item wrap code">
              {{ scope.row.number }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="60">
        <template #default="scope">
          <div style="text-align: right">
            <el-button
              :loading="loading"
              type="primary" 
              style="padding: 8px;min-height:30px"
              @click="onAdd(scope.row)" 
              plain
              circle>
              <template #icon>
                <i class="iconfont min icon-add-max"></i>
              </template>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <KeyCode @ok="onScanBarCode" :window="true" />
</template>

<script>
import { ref, nextTick } from 'vue'
import app from '@/app'
import { get } from '@/api/store/goods'
import model from '../../model/create'

import KeyCode from '@/components/keyCode'

export default {
  components: {
    KeyCode
  },
  setup() {
    // 列表
    const list = ref([])

    // 搜索
    const where = ref({
      type: 'number',
      value: ''
    })

    // 搜索商品
    const loading = ref(false)
    const getData = () => {
      loading.value = true
      get({ [where.value.type]: where.value.value }).then(res => {
        list.value = res.data
      }).finally(() => {
        loading.value = false
      })
    }

    // 添加商品
    const onAdd = async (data) => {
      loading.value = true
      model.add(data)

      // 使用 loading 方式，让添加商品按钮 loading 取消焦点
      await nextTick()
      loading.value = false
    }

    // 扫码
    const onScanBarCode = code => {
      // 判断是否已添加
      if(!model.addCode(code)) {
        // 新创建
        get({ code }).then(res => {
          if(res.data.length > 0) {
            onAdd(res.data[0])
          }
        })
      }
    }

    getData()

    return {
      app,
      plugin: app.plugin.index,
      where,
      list,
      loading,
      getData,
      model,
      onAdd,
      onScanBarCode
    }
  }
}
</script>